<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <%@ include file="../../static/head.jsp" %>

    <!-- font-awesome -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/font-awesome.min.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style>
    .myContainer {
        margin-right: 10px;
    }

    .searchGroupBox {
        margin-left: 10px;
        margin-right: 10px;
        background: #fff;
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
    }

    .well {
        min-height: 20px;
        padding: 19px;
        /*margin-bottom: 20px;*/
        background-color: #f5f5f5;
        border: 1px solid #e3e3e3;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
        box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
    }

    .flex-space-between {
        display: flex;
        justify-content: space-between;
        /*  交叉轴居中  */
        align-items: center;
    }

    .marginTop {
        margin-top: 10px;
    }

    .dataTable {
        min-height: 400px;
    }

    .flex_center {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /*穿梭框外框高宽度*/
    .el-transfer-panel {
        width: 300px;
        height: 400px;
    }

    /*穿梭框内部展示列表的高宽度*/
    .el-transfer-panel__list {
        width: 300px;
        height: 361px;
    }

</style>
<body>
<!-- Pre Loader -->
<div class="loading">
    <div class="spinner">
        <div class="double-bounce1"></div>
        <div class="double-bounce2"></div>
    </div>
</div>
<!--/Pre Loader -->
<div class="wrapper">
    <!-- Page Content -->
    <div id="content">
        <!-- Top Navigation -->
        <%@ include file="../../static/topNav.jsp" %>
        <!-- Menu -->
        <div class="container menu-nav">
            <nav class="navbar navbar-expand-lg lochana-bg text-white">
                <button class="navbar-toggler" type="button" data-toggle="collapse"
                        data-target="#navbarSupportedContent"
                        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="ti-menu text-white"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <!-- <div class="z-navbar-nav-title">$template2.back.menu.title.text</div> -->
                    <ul id="navUl" class="navbar-nav mr-auto">
                    </ul>
                </div>
            </nav>
        </div>
        <!-- /Menu -->
        <!-- Breadcrumb -->
        <!-- Page Title -->
        <div class="container mt-0">
            <div class="row breadcrumb-bar">
                <div class="col-md-6">
                    <h3 class="block-title">试题目管理</h3>
                </div>
                <div class="col-md-6">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item">
                            <a href="${pageContext.request.contextPath}/index.jsp">
                                <span class="ti-home"></span>
                            </a>
                        </li>
                        <li class="breadcrumb-item"><span>试题目管理</span></li>
                        <li class="breadcrumb-item active"><span>试题列表</span></li>
                    </ol>
                </div>
            </div>
        </div>
        <!-- /Page Title -->

        <!-- /Breadcrumb -->
        <!-- Main Content -->
        <div class="container">
            <div class="myContainer" id="examinationQuestionList">
                <!-- 试题信息 start -->
                <div class="searchGroupBox well flex-space-between">
                    <div class="flex-space-between">
                        <span style="min-width: 54px;">试题：</span>
                        <el-input v-model="examQuestions" placeholder="请输入试题题目进行查询"></el-input>
                        <span style="min-width: 86px;margin-left: 8px;">题目类型：</span>
                        <!-- 题目类型：1-单选题;2-多选题;3-判断题;4-填空题 -->
                        <el-select v-model="questionType" placeholder="题目类型" clearable>
                            <el-option label="单选题" value="1"></el-option>
                            <el-option label="多选题" value="2"></el-option>
                            <el-option label="判断题" value="3"></el-option>
                            <el-option label="填空题" value="4"></el-option>
                        </el-select>
                    </div>
                    <div>
                        <el-button type="success" icon="el-icon-search" @click="searchQuestion">搜索</el-button>
                        <el-button type="success" @click="createQuestionPage">新建试题<i
                                class="el-icon-plus el-icon--right"></i></el-button>
                    </div>
                </div>
                <!-- 试题信息 end -->

                <!-- 表格 start -->
                <div class="searchGroupBox well marginTop dataTable">
                    <el-table
                            :data="tableData"
                            stripe
                            style="width: 100%">
                        <el-table-column
                                prop="name"
                                label="题目">
                        </el-table-column>
                        <el-table-column
                                prop="type"
                                label="试题类型"
                                align="center"
                                :formatter="questionTypeFormatter">
                        </el-table-column>
                        <el-table-column
                                prop="correctAnswer"
                                align="center"
                                label="答案"
                                width="180">
                        </el-table-column>

                        <el-table-column
                                prop="score"
                                align="center"
                                label="分值"
                                width="180">
                        </el-table-column>

                        <el-table-column
                                label="操作"
                                align="center"
                                width="190">
                            <template slot-scope="scope">
                                <%--                                <el-button icon="el-icon-view" circle @click="handleClick(scope.row.id)"></el-button>--%>
                                <el-button type="primary" icon="el-icon-edit" circle
                                           @click="handleEdit(scope.row.id)"></el-button>
                                <el-button type="danger" icon="el-icon-delete" circle
                                           @click="handleDelete(scope.row.id)"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 表格 end -->

                <!-- 分页 start -->
                <div class="searchGroupBox well marginTop flex_center">
                    <div>
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="pageIndex"
                                :page-sizes="[10, 20, 30, 40]"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>
                    </div>
                </div>
                <!-- 分页 end -->
            </div>
            <div style="height: 20px;"></div>
        </div>
        <!-- /Main Content -->

    </div>
    <!-- /Page Content -->
</div>

<!-- Back to Top -->
<a id="back-to-top" href="#" class="back-to-top">
    <span class="ti-angle-up"></span>
</a>
<!-- /Back to Top -->
<%@ include file="../../static/foot.jsp" %>
<script>
    <%@ include file="../../utils/menu.jsp"%>
    <%@ include file="../../static/setMenu.js"%>
    <%@ include file="../../utils/baseUrl.jsp"%>
    <%@ include file="../../static/getRoleButtons.js"%>
    <%@ include file="../../static/crossBtnControl.js"%>

    // 用户登出
    <%@ include file="../../static/logout.jsp"%>

    $(document).ready(function () {
        //激活翻页按钮
        $('#tableId_previous').attr('class', 'paginate_button page-item previous')
        $('#tableId_next').attr('class', 'paginate_button page-item next')
        //隐藏原生搜索框
        $('#tableId_filter').hide()
        //设置右上角用户名
        $('.dropdown-menu h5').html(window.sessionStorage.getItem('username') + '(' + window.sessionStorage.getItem('role') + ')')
        //设置项目名
        $('.sidebar-header h3 a').html(projectName)
        setMenu();
        <%@ include file="../../static/myInfo.js"%>
    });
</script>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<!-- axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 引入element-ui组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    const examinationQuestionList = new Vue({
        el: "#examinationQuestionList",
        data() {
            return {
                // 题目名
                examQuestions: '',
                // 题目类型：1-单选题;2-多选题;3-判断题;4-填空题
                questionType: '',
                // - 分页数据 start
                // 当前页
                pageIndex: 1,
                // 每页显示条数
                pageSize: 10,
                // 总页数
                pages: 0,
                // 总条数
                total: 400,
                // - 分页数据 end
                tableData: [
                    {
                        "id": 2,
                        "name": "下面动物不属于昆虫的是（）。",
                        "type": 1,
                        "score": 20,
                        "answer": "[{\"value\":\"苍蝇\",\"option\":\"A\"},{\"value\":\"蚂蚱\",\"option\":\"B\"},{\"value\":\"蜜蜂\",\"option\":\"C\"},{\"value\":\"牛头\",\"option\":\"D\"}]",
                        "correctAnswer": "D",
                        "analysis": "哈哈哈哈",
                        "createTime": "2022-05-15 21:28:33"
                    }
                ]
            };
        },
        methods: {
            onSubmit() {
                console.log('submit!');
            },
            goBack: function () {

            },
            questionTypeFormatter(row, column) {
                // 1-单选题;2-多选题;3-判断题;4-填空题
                if (row.type === 1) {
                    return '单选题';
                } else if (row.type === 2) {
                    return '多选题';
                } else if (row.type === 3) {
                    return '判断题';
                } else if (row.type === 4) {
                    return '填空题';
                } else {
                    return '';
                }
            },
            handleSizeChange(val) {
                console.debug('每页' + val + '条');
                this.pageSize = val;
                this.searchQuestion()
            },
            handleCurrentChange(val) {
                console.debug('当前页: ' + val);
                this.pageIndex = val;
                this.searchQuestion()
            },
            statusFormatter(row, column) {
                return row.status == 1 ? '启用' : '禁用'
            },
            handleClick: function (id) {
                console.debug('查看' + id)
            },
            handleEdit: function (id) {
                console.debug('编辑' + id)
                // 保存编辑的题目编号
                window.sessionStorage.setItem('editQuestionId', id);
                // 跳转到编辑页面
                window.location.href = 'edit.jsp'
            },
            handleDelete: function (id) {
                const _this = this;
                console.debug('删除' + id)
                axios({
                    url: '/jspmk28g8/question/delete',
                    method: 'post',
                    data: {
                        id: id
                    },
                    transformRequest: [
                        function (data) {
                            let ret = ''
                            for (let it in data) {
                                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                            }
                            ret = ret.substring(0, ret.lastIndexOf('&'));
                            return ret
                        }
                    ],
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        'token': window.sessionStorage.getItem('token')
                    }
                }).then(function (res) {
                    const {code} = res.data;
                    if (code === 200) {
                        _this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        _this.searchQuestion()
                    } else {
                        _this.$message({
                            message: '删除失败',
                            type: 'error'
                        });
                    }
                }).catch(function (err) {
                    console.error(err);
                })
            },
            searchQuestion: function () {
                const _this = this
                this.tableData = []
                console.debug('搜索')
                axios({
                    url: '/jspmk28g8/question/page',
                    method: 'get',
                    params: {
                        // 题目名
                        examQuestions: _this.examQuestions,
                        // 试题类型：1单选，2多选，3判断，4填空
                        questionType: _this.questionType,
                        pageIndex: _this.pageIndex,
                        pageSize: _this.pageSize
                    },
                    headers: {
                        'token': window.sessionStorage.getItem('token')
                    }
                }).then(function (res) {
                    const {code, data} = res.data
                    if (code === 200) {
                        _this.tableData = data.records
                        _this.pages = data.pages
                        _this.total = data.total
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            },
            createQuestionPage: function () {
                console.debug('新建题目')
                window.location.href = 'add.jsp'
            },
        },
        mounted() {
            this.searchQuestion()
        }
    });
</script>
</body>

</html>